<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashboard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="static/css/global.css">
	<link rel="stylesheet" href="static/css/dashboard3.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_978885_29cu5kb39fk.css">
</head>
<body>
	<div class="container">
		<div class="layui-row dashboard-grid">
		    <div class="layui-col-xs5 dashboard-screen-first">
		    	<div class="dashboard-top-entry ac">
	      			<a href=""><img src="static/image/dwzp.png" alt=""></a>
		      		<a href=""><img src="static/image/rcjc.png" alt=""></a>
		      		<a href=""><img src="static/image/khpf.png" alt=""></a>
		      		<a href=""><img src="static/image/khsh.png" alt=""></a>
	      		</div>
	      		<div class="dashboard-top-entry ac">
	      			<a href=""><img src="static/image/zgqk.png" alt=""></a>
	      			<a href=""><img src="static/image/khhz.png" alt=""></a>
		      		<a href=""><img src="static/image/dwgl.png" alt=""></a>
		      		<a href=""><img src="static/image/khsz.png" alt=""></a>
	      		</div>
	      		<div class="todolist-container">
					<div class="title-icon">
		     			<p>代办事项</p>
		     		</div>

		     		<div class="todolist-table">
	      				<div class="table-header vc">
	      					<div class="column flex2">事件</div>
	      					<div class="column flex2">时间</div>
	      					<div class="column flex1 ar">操作</div>
	      				</div>
	      				<div class="header-list">
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      				</div>
	      			</div>

	      			<div class="title-icon">
		     			<p>超期未完成整改任务</p>
		     		</div>

		     		<div class="todolist-table">
	      				<div class="table-header vc">
	      					<div class="column flex2">事件</div>
	      					<div class="column flex2">时间</div>
	      					<div class="column flex1 ar">操作</div>
	      				</div>
	      				<div class="header-list">
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      				</div>
	      			</div>
		     	</div>
		    </div>
		    <div class="layui-col-xs5 dashboard-apart dashboard-screen-second">
		    	<div class="title-icon">
      				<p>异常指标排名</p>
      			</div>
      			<div class="progess-item">
      				<ul>
      					<li class="vc">
      						<span class="pr-w1">NO.1</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #cf4049;width: 90%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.2</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #e88d3d;width: 80%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.3</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #ddd846;width: 70%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.4</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #58e5a3;width: 60%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.5</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #b6daea;width: 50%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      				</ul>
      			</div>
	      			<div class="title-icon">
	      				<p>考核结果同比</p>
	      			</div>
	      			<div id="echarts-render-khrs" class="echart-limit"></div>
	      			<div class="title-icon">
	      				<p>考核结果同比</p>
	      			</div>
	      			<div id="echarts-render-khrs2" class="echart-limit"></div>
	      			<div class="font-intro">
	      				<p>环比增长速度 = （本期数 - 上期数）/ 上期数x100%，反映本期比上期增长多少</p>
	      				<p>环比发展速度 = 本期数 / 上期数x100%，是报告期水平与前一期之比，反映现象在前后期的发展变化情况</p>
	      			</div>

		    </div>
		    <div class="layui-col-xs2 dashboard-apart dashboard-screen-three">
				<div class="title-icon">
      				<p>得分最后20名</p>
      			</div>
	  			<div class="rank-list">
	  				<ul>
	  					<li><span>No.1</span><p>杭州市单位名称</p></li>
	  					<li><span>No.2</span><p>杭州市单位名称</p></li>
	  					<li><span>No.3</span><p>杭州市单位名称</p></li>
	  					<li><span>No.4</span><p>杭州市单位名称</p></li>
	  					<li><span>No.5</span><p>杭州市单位名称</p></li>
	  					<li><span>No.6</span><p>杭州市单位名称</p></li>
	  					<li><span>No.7</span><p>杭州市单位名称</p></li>
	  					<li><span>No.8</span><p>杭州市单位名称</p></li>
	  					<li><span>No.9</span><p>杭州市单位名称</p></li>
	  					<li><span>No.10</span><p>杭州市单位名称</p></li>
	  					<li><span>No.11</span><p>杭州市单位名称</p></li>
	  					<li><span>No.12</span><p>杭州市单位名称</p></li>
	  					<li><span>No.13</span><p>杭州市单位名称</p></li>
	  					<li><span>No.14</span><p>杭州市单位名称</p></li>
	  					<li><span>No.15</span><p>杭州市单位名称</p></li>
	  					<li><span>No.16</span><p>杭州市单位名称</p></li>
	  					<li><span>No.17</span><p>杭州市单位名称</p></li>
	  					<li><span>No.18</span><p>杭州市单位名称</p></li>
	  					<li><span>No.19</span><p>杭州市单位名称</p></li>
	  					<li><span>No.20</span><p>杭州市单位名称</p></li>
	  				</ul>
	  			</div>
		    </div>
	  	</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="static/js/echarts.common.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form', 'element'], function(){
  	var layer = layui.layer, form = layui.form, element = layui.element
  	var myChart = echarts.init(document.getElementById('echarts-render-khrs'))
  	var myChart2 = echarts.init(document.getElementById('echarts-render-khrs2'))

  	var mockdataformate  = [
  		{
  			name: '同比增长率',
  			time: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ],
  			value: [393, 438, 485, 631, 689, 824, 587, 312]
  		},
  		{
  			name: '同期比',
  			value: [200, 382, 102, 267, 186, 315, 316, 124]
  		}
  	]
  	var option = {
	    tooltip: {},
	    grid: {
	        top: '3%',
	        left: '1%',
	        right: '1%',
	        bottom: '15%',
	        containLabel: true,
	    },
	    xAxis: [{
	        type: 'category',
	        boundaryGap: true,
	        axisLine: { //坐标轴轴线相关设置。数学上的x轴
	            show: false,
	        },
	        axisLabel: { //坐标轴刻度标签的相关设置
	            textStyle: {
	                color: '#d1e6eb',
	                margin: 10,
	                fontSize: 10
	            },
	        },
	        axisTick: {
	            show: false,
	        },
	        data: mockdataformate[0].time
	        // \n 换行
	        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
	        // formatter: function(value) {
	         //        var ret = ""; //拼接加\n返回的类目项
	         //        var maxLength = 5; //每项显示文字个数
	         //        var valLength = value.length; //X轴类目项的文字个数
	         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
	         //        if (rowN > 1) //如果类目项的文字大于5,
	         //        {
	         //            for (var i = 0; i < rowN; i++) {
	         //                var temp = ""; //每次截取的字符串
	         //                var start = i * maxLength; //开始截取的位置
	         //                var end = start + maxLength; //结束截取的位置
	         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
	         //                temp = value.substring(start, end) + "\n";
	         //                ret += temp; //凭借最终的字符串
	         //            }
	         //            return ret;
	         //        } else {
	         //            return value;
	         //        }
	         //    },
	    }],
	    yAxis: [{
	        type: 'value',
	        min: 0,
	        // max: 140,
	        // splitNumber: 10,
	        splitLine: {
	            show: true,
	            lineStyle: {
	                color: '#343434',
	                type: 'dashed',
	                width: 1.5
	            }
	        },
	        axisLine: {
	            show: false,
	        },
	        axisLabel: {
	            margin: 20,
	            textStyle: {
	                color: '#d1e6eb'
	            },
	        },
	        axisTick: {
	            show: false,
	        },
	    }],
	    legend: [{
	        show: true,
	        itemWidth: 10,
	        left: '1%',
	        bottom: '0%',
	        itemHeight: 10,
	        itemGap: 30,
	        borderRadius: 4,
	        data: [{name: '同比增长率'},{name: '同期比'}],
	        textStyle: {
	            color: '#ccc',
	            fontStyle: 'normal',
	            fontSize: 12,
	        }
	    }],
	    series: [{
	    	name: '同比增长率',
	        type: 'line',
	        // smooth: true, //是否平滑曲线显示
			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
	        showAllSymbol: true,
	        // symbol: 'emptyCircle',
	        symbolSize: 9,
	        lineStyle: {
	            normal: {
	                color: "#3aa1ff", // 线条颜色
	            },
	        },
	        itemStyle: {
	            normal: {
	                color: "#3aa1ff",
	            }
	        },
	        data: mockdataformate[0].value
	    }, {
	    	name: '同期比',
	        type: 'bar',
	        barWidth: 20,
	        label: {
	            show: false
	        },
	        itemStyle: {
	        	emphasis: {
	        		label: {
	        			// show: false
	        		}
	        	},
	            normal: {
	            	color: '#26D968'
	            }
	        },
	        data: mockdataformate[1].value
	    }]
	};

	var option2 = {
	    tooltip: {},
	    grid: {
	        top: '3%',
	        left: '1%',
	        right: '1%',
	        bottom: '15%',
	        containLabel: true,
	    },
	    xAxis: [{
	        type: 'category',
	        boundaryGap: true,
	        axisLine: { //坐标轴轴线相关设置。数学上的x轴
	            show: false,
	        },
	        axisLabel: { //坐标轴刻度标签的相关设置
	            textStyle: {
	                color: '#d1e6eb',
	                margin: 10,
	                fontSize: 10
	            },
	        },
	        axisTick: {
	            show: false,
	        },
	        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
	        // \n 换行
	        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
	        // formatter: function(value) {
	         //        var ret = ""; //拼接加\n返回的类目项
	         //        var maxLength = 5; //每项显示文字个数
	         //        var valLength = value.length; //X轴类目项的文字个数
	         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
	         //        if (rowN > 1) //如果类目项的文字大于5,
	         //        {
	         //            for (var i = 0; i < rowN; i++) {
	         //                var temp = ""; //每次截取的字符串
	         //                var start = i * maxLength; //开始截取的位置
	         //                var end = start + maxLength; //结束截取的位置
	         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
	         //                temp = value.substring(start, end) + "\n";
	         //                ret += temp; //凭借最终的字符串
	         //            }
	         //            return ret;
	         //        } else {
	         //            return value;
	         //        }
	         //    },
	    }],
	    yAxis: [{
	        type: 'value',
	        min: 0,
	        // max: 140,
	        // splitNumber: 10,
	        splitLine: {
	            show: true,
	            lineStyle: {
	                color: '#343434',
	                type: 'dashed',
	                width: 1.5
	            }
	        },
	        axisLine: {
	            show: false,
	        },
	        axisLabel: {
	            margin: 20,
	            textStyle: {
	                color: '#d1e6eb',

	            },
	        },
	        axisTick: {
	            show: false,
	        },
	    }],
	    legend: [{
	        show: true,
	        itemWidth: 10,
	        left: '1%',
	        bottom: '0%',
	        itemHeight: 10,
	        itemGap: 30,
	        // borderRadius: ,
	        data: [{name: '环比增长速度'},{name: '环比发展速度'}],
	        textStyle: {
	            color: '#ccc',
	            fontStyle: 'normal',
	            fontSize: 12,
	        }
	    }],
	    series: [{
	    	name: '环比增长速度',
	        type: 'line',
	        // smooth: true, //是否平滑曲线显示
			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
	        showAllSymbol: true,
	        // symbol: 'emptyCircle',
	        symbolSize: 9,
	        lineStyle: {
	            normal: {
	                color: "#3aa1ff", // 线条颜色
	            },
	        },
	        itemStyle: {
	            normal: {
	                color: "#3aa1ff",
	            }
	        },
	        data: [393, 438, 485, 631, 689, 824, 587, 312]
	    }, {
	    	name: '环比发展速度',
	        type: 'bar',
	        barWidth: 20,
	        label: {
	            show: false
	        },
	        itemStyle: {
	        	emphasis: {
	        		label: {
	        			// show: false
	        		}
	        	},
	            normal: {
	            	color: '#26D968'
	            }
	        },
	        data: [200, 382, 102, 267, 186, 315, 316, 124]
	    }]
	};

	myChart.setOption(option);
	myChart2.setOption(option2);

	$('.dashboard-top-entry img').on('mouseover',function(){
		var src = $(this).attr('src')
		var newsrc = src.replace('.png','-active.png')
		console.log(newsrc)
		$(this).attr('src', newsrc)
	})
	$('.dashboard-top-entry img').on('mouseleave',function(){
		var src = $(this).attr('src')
		var newsrc = src.replace('-active.png','.png')
		console.log(newsrc)
		$(this).attr('src', newsrc)
	})

});
</script>
</html>